<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:fragment="head(title)">
    <meta charset="UTF-8">
    <title th:replace="${title}">fragments</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
    <link rel="stylesheet" href="../../static/css/typo.css" th:href="@{/css/typo.css}">
    <link rel="stylesheet" href="../../static/css/me.css" th:href="@{/css/me.css}">
    <link rel="stylesheet" href="../../static/css/animate.min.css" th:href="@{/css/animate.min.css}">
    <link rel="stylesheet" href="../../static/lib/prism/prism.css" th:href="@{/lib/prism/prism.css}">
    <link rel="stylesheet" href="../../static/lib/tocbot/tocbot.css" th:href="@{/lib/tocbot/tocbot.css}">
    <link rel="stylesheet" href="../../static/lib/editormd/css/editormd.min.css" th:href="@{/lib/editormd/css/editormd.min.css}">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery.scrollto@2.1.3/jquery.scrollTo.min.js"></script>
    <script src="../../static/lib/prism/prism.js" th:src="@{/lib/prism/prism.js}"></script>
    <script src="../../static/lib/tocbot/tocbot.min.js" th:src="@{/lib/tocbot/tocbot.min.js}"></script>
    <script src="../../static/js/jquery.qrcode.min.js" th:src="@{/js/jquery.qrcode.min.js}"></script>
    <script src="../../static/js/jquery.waypoints.js" th:src="@{/js/jquery.waypoints.js}"></script>
    <script src="../../static/lib/editormd/js/editormd.min.js" th:src="@{/lib/editormd/js/editormd.min.js}"></script>
</head>
<body>
<!--导航-->
<nav th:fragment="menu(n)"  class="ui  inverted attached segment m-padded-tb-mini m-shadow-small">
    <div class="ui container">
        <div class="ui inverted secondary stackable menu ">
            <h2 class="ui teal header item ">MyBlog管理后台</h2>
            <a th:href="@{/admin/blogs.html}" href="#" class=" m-item item m-mobile-hide" th:classappend="${n==1} ? 'active' "><i class=" home icon "></i>博客</a>
            <a th:href="@{/admin/types.html}" href="#" class="m-item item m-mobile-hide" th:classappend="${n==2} ? 'active' "><i class=" idea icon"></i>分类</a>
            <a th:href="@{/admin/tags.html}" href="#" class="m-item item m-mobile-hide" th:classappend="${n==3} ? 'active' "><i class=" tags icon"></i>标签</a>
            <div class="m-item  m-mobile-hide right menu" id="logout">
                <div class="ui  dropdown item">
                    <div class="text">
                        <img class="ui avatar image" src="https://picsum.photos/100/100?image=1036" th:src="@{${session.user.avatar}}">
                            <span th:text="${session.user.nickname}">ming</span>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <a href="#" class="ui icon black button m-top-right m-mobile-show" id="m-mobile-show">
        <i class="sidebar icon"></i>
    </a>
</nav>
<!--底部-->
<footer th:fragment="footer" class="ui inverted vertical segment m-padded-tb-massive">
    <div class="ui center aligned container">
        <div class="ui inverted divided stackable grid m-text-spaced m-opacity-mini">
            <div class="three wide column list">
                <a href="#" class="item">
                    <img src="../static/images/wechat.png" th:src="@{#{index.myWechat}}" class ="ui rounded image" alt="">
                </a>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header">最新博客</h4>
                <div id="newBlogContainer">
                    <div class="ui inverted link list" th:fragment="newblogList">
                        <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" class="item" th:each="blog : ${newblogs}" th:text="${blog.title}">用户故事(User Story)</a>
                    </div>
                </div>

            </div>
            <div class="three wide column">
                <h4 class="ui inverted header">联系我</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item" th:text="#{index.email}">Email:minghui@qq.com</a>
                    <a href="#" class="item" th:text="#{index.qq}">QQ: 3268693203</a>
                </div>
            </div>
            <div class="seven wide column">
                <h4 class="ui inverted header">Blog</h4>
                <p class="m-text-thin">记录个人生活</p>
            </div>
        </div>
        <div class="ui inverted section divider"></div>
        <p class="m-text-thin m-text-spaced m-opacity-tiny">Copyrigh @2021-2022 Designed by Huang Minghui</p>
    </div>


</footer>
<script th:fragment="logout">
    $(function () {
        $("#logout").click(function () {
            location.href = "/admin/logout";
        })
    })
</script>
</body>
</html>